<!DOCTYPE html >
<html>
<head>
    <title>Pie Representation-Highcharts QBuilder</title>
    
    <script type="text/javascript" src="../../../libraries/jquery-1.6.2.min.js" ></script>
    <script type="text/javascript" src="../../../libraries/Highcharts/highcharts.js" ></script>
    <script type="text/javascript" src="../../../libraries/Highcharts/modules/exporting.js" ></script>
    <script type="text/javascript" src="../../../libraries/Highcharts/themes/gray.js"></script>

    <script type="text/javascript">
      var chart;
      $(document).ready(function() {
          chart = new Highcharts.Chart({
              chart: {
                  renderTo: 'container', 
                  defaultSeriesType: 'scatter',
                  zoomType: 'xy'
              },
              title: {
                  text: 'Nombre de commande pendant le mois de Juillet, classer par status'
              },
              credits: {
                  enabled: false
              },
              xAxis: {
                  type: 'datetime',
                  dateTimeLabelFormats: {
                      day: '%e of %b'
                  }
             },
             yAxis: {
                  title: {
                      text: 'Nombre de commande'
                  }
             },
             tooltip: {
                  formatter: function() {
                          return '<b>'+ this.series.name +'</b><br/>'+Highcharts.dateFormat('%e. %b', this.x) +': '+ this.y +' m';
                  }
             },
             legend: {
                  layout: 'vertical',
                  align: 'left',
                  verticalAlign: 'top',
                  x: 100,
                  y: 50,
                  floating: true,
                  backgroundColor: Highcharts.theme.legendBackgroundColor || '#FFFFFF',
                  borderWidth: 1
             },
             plotOptions: {
                  scatter: {
                      marker: {
                          radius: 5,
                          states: {
                              hover: {
                                  enabled: true,
                                  lineColor: 'rgb(100,100,100)'
                              }
                          }
                      },
                      states: {
                          hover: {
                              marker: {
                                   enabled: false
                              }
                          }
                      }
                  }
             },
             series: [{
                 name: 'Status: 0',
                 color: 'rgba(223, 83, 83, .5)',
                 data: [[Date.UTC(2011, 6, 1), 11], [Date.UTC(2011, 6, 2), 12], [Date.UTC(2011, 6, 3), 12],
                        [Date.UTC(2011, 6, 4), 12], [Date.UTC(2011, 6, 5), 12], [Date.UTC(2011, 6, 6), 12],
                        [Date.UTC(2011, 6, 7), 10], [Date.UTC(2011, 6, 8), 9], [Date.UTC(2011, 6, 9), 11],
                        [Date.UTC(2011, 6, 10), 6], [Date.UTC(2011, 6, 11), 6], [Date.UTC(2011, 6, 12), 6],
                        [Date.UTC(2011, 6, 13), 4], [Date.UTC(2011, 6, 14), 4], [Date.UTC(2011, 6, 15), 4],
                        [Date.UTC(2011, 6, 16), 9], [Date.UTC(2011, 6, 17), 9], [Date.UTC(2011, 6, 18), 9],
                        [Date.UTC(2011, 6, 19), 14], [Date.UTC(2011, 6, 20), 14], [Date.UTC(2011, 6, 21), 14],
                        [Date.UTC(2011, 6, 22), 19], [Date.UTC(2011, 6, 23), 19], [Date.UTC(2011, 6, 24), 22],
                        [Date.UTC(2011, 6, 25), 14], [Date.UTC(2011, 6, 26), 13], [Date.UTC(2011, 6, 27), 16],
                        [Date.UTC(2011, 6, 28), 12], [Date.UTC(2011, 6, 29), 13], [Date.UTC(2011, 6, 30), 13], [Date.UTC(2011, 6, 31), 14]]
             }, {
                 name: 'Status: 1',
                 color: 'rgba(78, 203, 83, .5)',
                 data: [[Date.UTC(2011, 6, 1), 14], [Date.UTC(2011, 6, 2), 13], [Date.UTC(2011, 6, 3), 12],
                        [Date.UTC(2011, 6, 4), 14], [Date.UTC(2011, 6, 5), 13], [Date.UTC(2011, 6, 6), 14],
                        [Date.UTC(2011, 6, 7), 11], [Date.UTC(2011, 6, 8), 12], [Date.UTC(2011, 6, 9), 13],
                        [Date.UTC(2011, 6, 10), 6], [Date.UTC(2011, 6, 11), 6], [Date.UTC(2011, 6, 12), 8],
                        [Date.UTC(2011, 6, 13), 5], [Date.UTC(2011, 6, 14), 4], [Date.UTC(2011, 6, 15), 5],
                        [Date.UTC(2011, 6, 16), 11], [Date.UTC(2011, 6, 17), 10], [Date.UTC(2011, 6, 18), 11],
                        [Date.UTC(2011, 6, 19), 16], [Date.UTC(2011, 6, 20), 15], [Date.UTC(2011, 6, 21), 16],
                        [Date.UTC(2011, 6, 22), 21], [Date.UTC(2011, 6, 23), 19], [Date.UTC(2011, 6, 24), 24],
                        [Date.UTC(2011, 6, 25), 18], [Date.UTC(2011, 6, 26), 16], [Date.UTC(2011, 6, 27), 20],
                        [Date.UTC(2011, 6, 28), 15], [Date.UTC(2011, 6, 29), 14], [Date.UTC(2011, 6, 30), 13], [Date.UTC(2011, 6, 31), 14]]
             }, {
                 name: 'Status: 2',
                 color: 'rgba(119, 152, 191, .5)',
                 data: [[Date.UTC(2011, 6, 1), 20], [Date.UTC(2011, 6, 2), 19], [Date.UTC(2011, 6, 3), 20],
                        [Date.UTC(2011, 6, 4), 19], [Date.UTC(2011, 6, 5), 19], [Date.UTC(2011, 6, 6), 19],
                        [Date.UTC(2011, 6, 7), 16], [Date.UTC(2011, 6, 8), 16], [Date.UTC(2011, 6, 9), 18],
                        [Date.UTC(2011, 6, 10), 10], [Date.UTC(2011, 6, 11), 9], [Date.UTC(2011, 6, 12), 12],
                        [Date.UTC(2011, 6, 13), 6], [Date.UTC(2011, 6, 14), 6], [Date.UTC(2011, 6, 15), 6],
                        [Date.UTC(2011, 6, 16), 15], [Date.UTC(2011, 6, 17), 14], [Date.UTC(2011, 6, 18), 15],
                        [Date.UTC(2011, 6, 19), 24], [Date.UTC(2011, 6, 20), 23], [Date.UTC(2011, 6, 21), 29],
                        [Date.UTC(2011, 6, 22), 28], [Date.UTC(2011, 6, 23), 29], [Date.UTC(2011, 6, 24), 36],
                        [Date.UTC(2011, 6, 25), 22], [Date.UTC(2011, 6, 26), 24], [Date.UTC(2011, 6, 27), 32],
                        [Date.UTC(2011, 6, 28), 21], [Date.UTC(2011, 6, 29), 20], [Date.UTC(2011, 6, 30), 21], [Date.UTC(2011, 6, 31), 22]]
             }]
         });  
     });
    </script>

</head>
<body>
    <div id="container" style="height:410px; margin: 0 2em; min-width: 600px">
</body>
</html>
